ปลดล็อกศักยภาพด้านการพิมพ์: คู่มือฉบับสมบูรณ์สำหรับ CSS @font-feature-values

ในโลกของการออกแบบเว็บ การพิมพ์ (typography) มีบทบาทสำคัญในการสร้างประสบการณ์ผู้ใช้และสื่อถึงเอกลักษณ์ของแบรนด์ แม้ว่าคุณสมบัติฟอนต์พื้นฐานของ CSS เช่น font-family, font-size, และ font-weight จะให้การควบคุมขั้นพื้นฐาน แต่กฎ @font-feature-values นั้นเปิดประตูสู่โลกแห่งการปรับแต่งการพิมพ์ขั้นสูง กฎนี้จะปลดล็อกศักยภาพที่ซ่อนอยู่ของฟอนต์ OpenType ช่วยให้นักพัฒนาและนักออกแบบสามารถปรับแต่งฟีเจอร์เฉพาะของฟอนต์ได้อย่างละเอียดเพื่อความสวยงาม การอ่านง่าย และการเข้าถึงได้ที่ดียิ่งขึ้น คู่มือนี้จะเจาะลึกถึงความซับซ้อนของ @font-feature-values สำรวจไวยากรณ์ การใช้งาน และการประยุกต์ใช้จริงในบริบทต่างๆ ทั่วโลก

ทำความเข้าใจฟีเจอร์ของ OpenType

ก่อนที่จะลงลึกในรายละเอียดของ @font-feature-values สิ่งสำคัญคือต้องเข้าใจแนวคิดพื้นฐานของฟีเจอร์ OpenType เสียก่อน OpenType เป็นรูปแบบฟอนต์ที่ใช้กันอย่างแพร่หลายซึ่งขยายขีดความสามารถของฟอนต์รุ่นก่อนอย่าง TrueType และ PostScript โดยได้รวมเอาชุดฟีเจอร์ที่หลากหลายซึ่งควบคุมแง่มุมต่างๆ ของการแสดงผลรูปอักขระ (glyph) รวมถึง:

• อักษรควบ (Ligatures): การรวมตัวอักษรตั้งแต่สองตัวขึ้นไปเป็นรูปอักขระเดียวเพื่อความสวยงามและการอ่านที่ดีขึ้น (เช่น 'fi', 'fl')
• รูปอักขระทางเลือก (Alternate Glyphs): การมีรูปแบบต่างๆ ของตัวอักษรเฉพาะ ทำให้สามารถเลือกสไตล์หรือปรับเปลี่ยนตามบริบทได้
• ชุดสไตล์ (Stylistic Sets): การจัดกลุ่มรูปแบบสไตล์ที่เกี่ยวข้องกันไว้ภายใต้ชื่อเดียว ช่วยให้นักออกแบบสามารถใช้การตกแต่งที่สวยงามอย่างสม่ำเสมอได้ง่ายขึ้น
• สไตล์ตัวเลข (Number Styles): การเสนอสไตล์ตัวเลขที่แตกต่างกัน เช่น ตัวเลขแบบเต็มบรรทัด (lining figures), ตัวเลขแบบโบราณ (oldstyle figures) และตัวเลขความกว้างเท่ากัน (tabular figures) ซึ่งแต่ละแบบเหมาะกับการใช้งานเฉพาะทาง
• เศษส่วน (Fractions): การจัดรูปแบบเศษส่วนโดยอัตโนมัติด้วยรูปอักขระของตัวเศษ ตัวส่วน และเส้นคั่นเศษส่วนที่เหมาะสม
• ตัวพิมพ์เล็กที่เป็นตัวใหญ่ (Small Capitals): การแสดงตัวพิมพ์เล็กในรูปแบบที่เล็กกว่าของตัวพิมพ์ใหญ่
• อักษรทางเลือกตามบริบท (Contextual Alternates): การปรับรูปร่างของรูปอักขระตามตัวอักษรที่อยู่รอบๆ เพื่อเพิ่มความสามารถในการอ่านและความกลมกลืนทางสายตา
• ตัวอักษรตกแต่ง (Swashes): ส่วนขยายตกแต่งที่เพิ่มเข้าไปในรูปอักขระบางตัว เพิ่มความหรูหราและลูกเล่น
• การจัดช่องไฟ (Kerning): การปรับระยะห่างระหว่างคู่ตัวอักษรที่เฉพาะเจาะจงเพื่อปรับปรุงความสมดุลทางสายตา

ฟีเจอร์เหล่านี้มักจะถูกกำหนดไว้ในไฟล์ฟอนต์เอง @font-feature-values เป็นวิธีในการเข้าถึงและควบคุมฟีเจอร์เหล่านี้ได้โดยตรงจาก CSS ซึ่งมอบความยืดหยุ่นที่ไม่มีใครเทียบได้ในการออกแบบการพิมพ์

แนะนำ CSS @font-feature-values

at-rule @font-feature-values ช่วยให้คุณสามารถกำหนดชื่อที่สื่อความหมายสำหรับการตั้งค่าฟีเจอร์ OpenType ที่เฉพาะเจาะจงได้ ซึ่งช่วยให้คุณสามารถใช้ชื่อที่มนุษย์อ่านเข้าใจได้ง่ายขึ้นในโค้ด CSS ของคุณ ทำให้โค้ดของคุณบำรุงรักษาง่ายและเข้าใจง่ายขึ้น ไวยากรณ์พื้นฐานมีดังนี้:

            @font-feature-values <font-family-name> {
  <feature-tag-value> {
    <feature-name>: <feature-value>
  }
}

            

              
                Copy
              
            
          

เรามาดูรายละเอียดของแต่ละส่วนกัน:

• @font-feature-values: at-rule ที่เริ่มต้นการกำหนดค่าฟีเจอร์
• <font-family-name>: ชื่อของตระกูลฟอนต์ที่ค่าฟีเจอร์เหล่านี้จะนำไปใช้ (เช่น 'MyCustomFont', 'Arial') เพื่อให้แน่ใจว่าค่าฟีเจอร์ที่กำหนดจะถูกนำไปใช้กับองค์ประกอบที่ใช้ฟอนต์ที่ระบุเท่านั้น
• <feature-tag-value>: บล็อกที่กำหนดค่าสำหรับแท็กฟีเจอร์ OpenType ที่เฉพาะเจาะจง
• <feature-tag>: แท็กสี่ตัวอักษรที่ระบุฟีเจอร์ OpenType (เช่น liga สำหรับอักษรควบ, smcp สำหรับตัวพิมพ์เล็กที่เป็นตัวใหญ่, cswh สำหรับตัวอักษรตกแต่งตามบริบท) แท็กเหล่านี้เป็นมาตรฐานและกำหนดโดยข้อกำหนดของ OpenType คุณสามารถค้นหารายการแท็กเหล่านี้ทั้งหมดได้ในเอกสารของ OpenType และแหล่งข้อมูลออนไลน์ต่างๆ
• <feature-name>: ชื่อที่สื่อความหมายที่คุณกำหนดให้กับค่าเฉพาะสำหรับฟีเจอร์ OpenType นี่คือชื่อที่คุณจะใช้ในกฎ CSS ของคุณ ควรเลือกชื่อที่มีความหมายและจำง่าย
• <feature-value>: ค่าจริงสำหรับฟีเจอร์ OpenType โดยทั่วไปจะเป็น on หรือ off สำหรับฟีเจอร์แบบบูลีน หรือค่าตัวเลขสำหรับฟีเจอร์ที่รับช่วงของค่า

ตัวอย่างและการใช้งานจริง

เพื่อแสดงให้เห็นถึงพลังของ @font-feature-values เรามาดูตัวอย่างการใช้งานจริงหลายๆ แบบกัน:

1. การเปิดใช้งานอักษรควบเสริม (Discretionary Ligatures)

อักษรควบเสริมเป็นอักษรควบที่ไม่บังคับซึ่งสามารถเพิ่มความสวยงามให้กับชุดตัวอักษรบางชุดได้ ในการเปิดใช้งาน คุณสามารถกำหนดค่าฟีเจอร์ได้ดังนี้:

            @font-feature-values "MyCustomFont" {
  @discretionary-ligatures {
    common-ligatures: on;
  }
}

.my-text {
  font-family: "MyCustomFont";
  font-variant-alternates: discretionary-ligatures;
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ เราได้กำหนดค่าฟีเจอร์ชื่อ common-ligatures สำหรับฟีเจอร์ OpenType dlig (discretionary ligatures) จากนั้นเรานำค่าฟีเจอร์นี้ไปใช้กับคลาส .my-text โดยใช้คุณสมบัติ font-variant-alternates หมายเหตุ: เบราว์เซอร์รุ่นเก่าอาจต้องใช้คุณสมบัติ font-variant-ligatures ควรตรวจสอบความเข้ากันได้ของเบราว์เซอร์ก่อนนำไปใช้งานจริง

2. การควบคุมชุดสไตล์ (Stylistic Sets)

ชุดสไตล์ช่วยให้คุณสามารถใช้ชุดรูปแบบสไตล์ต่างๆ กับข้อความของคุณได้ ตัวอย่างเช่น คุณอาจต้องการใช้ชุดสไตล์เฉพาะสำหรับหัวเรื่องหรือเนื้อหา

            @font-feature-values "MySerifFont" {
  @stylistic-sets {
    alternate-a: ss01;
    elegant-numbers: ss02;
  }
}

.heading {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(alternate-a);
}

.body-text {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(elegant-numbers);
}

            

              
                Copy
              
            
          

ในที่นี้ เราได้กำหนดชุดสไตล์สองชุด: alternate-a (จับคู่กับ ss01) และ elegant-numbers (จับคู่กับ ss02) จากนั้นเรานำชุดเหล่านี้ไปใช้กับองค์ประกอบต่างๆ โดยใช้ font-variant-alternates แท็กชุดสไตล์เฉพาะ (ss01, ss02, ฯลฯ) จะถูกกำหนดไว้ในตัวฟอนต์เอง โปรดดูเอกสารประกอบของฟอนต์สำหรับชุดสไตล์ที่มีให้ใช้งาน

3. การปรับแต่งสไตล์ตัวเลข

ฟอนต์ OpenType มักมีสไตล์ตัวเลขที่แตกต่างกันสำหรับวัตถุประสงค์ต่างๆ ตัวเลขแบบเต็มบรรทัด (Lining figures) มักใช้ในตารางและแผนภูมิ ในขณะที่ตัวเลขแบบโบราณ (oldstyle figures) จะกลมกลืนกับเนื้อหาได้ดีกว่า

            @font-feature-values "MyProFont" {
  @styleset {
    tabular-numbers: tnum;
    proportional-oldstyle: pold;
  }
}

.table-data {
  font-family: "MyProFont";
  font-variant-alternates: styleset(tabular-numbers);
}

.body-text {
  font-family: "MyProFont";
  font-variant-alternates: styleset(proportional-oldstyle);
}

            

              
                Copy
              
            
          

ตัวอย่างนี้กำหนด tabular-numbers (tnum) สำหรับข้อมูลในตาราง และ proportional-oldstyle (pold) สำหรับเนื้อหา ซึ่งช่วยเพิ่มความสามารถในการอ่านและความสอดคล้องทางสายตา

4. การรวมฟีเจอร์หลายอย่างเข้าด้วยกัน

คุณสามารถรวมฟีเจอร์หลายอย่างไว้ในประกาศ font-variant-alternates เดียวได้:

            @font-feature-values "MyComplexFont" {
  @styleset {
    historical-forms: hist;
    contextual-alternates: calt;
  }
  @discretionary-ligatures {
   rare-ligatures: dlig;
  }
}

.special-text {
  font-family: "MyComplexFont";
  font-variant-alternates: styleset(historical-forms) discretionary-ligatures(rare-ligatures);
}

            

              
                Copy
              
            
          

สิ่งนี้ช่วยให้สามารถสร้างเอฟเฟกต์การพิมพ์ที่ซับซ้อนได้โดยการใช้ฟีเจอร์ OpenType หลายอย่างพร้อมกัน โปรดทราบว่าบางครั้งลำดับอาจมีความสำคัญ การทดลองเป็นกุญแจสำคัญในการได้ผลลัพธ์ที่ต้องการ

การใช้ font-variant-settings เพื่อเข้าถึงฟีเจอร์โดยตรง

ในขณะที่ @font-feature-values และ font-variant-alternates ให้การควบคุมในระดับสูง แต่คุณสมบัติ font-variant-settings ให้การเข้าถึงฟีเจอร์ OpenType โดยตรงโดยใช้แท็กสี่ตัวอักษร คุณสมบัตินี้มีประโยชน์อย่างยิ่งเมื่อต้องจัดการกับฟีเจอร์ที่ไม่ได้ครอบคลุมโดยคีย์เวิร์ดที่กำหนดไว้ล่วงหน้าของ font-variant-alternates หรือเมื่อคุณต้องการการควบคุมที่ละเอียดมากขึ้น

ไวยากรณ์สำหรับ font-variant-settings คือ:

            font-variant-settings: "<feature-tag>" <value>, "<feature-tag>" <value>, ...;

            

              
                Copy
              
            
          

ตัวอย่างเช่น หากต้องการเปิดใช้งานตัวพิมพ์เล็กที่เป็นตัวใหญ่ คุณสามารถใช้:

            .small-caps-text {
  font-family: "MyFont";
  font-variant-settings: "smcp" 1;
}

            

              
                Copy
              
            
          

ในที่นี้ "smcp" 1 สั่งให้เบราว์เซอร์เปิดใช้งานฟีเจอร์ตัวพิมพ์เล็กที่เป็นตัวใหญ่โดยตรง ค่า 1 โดยทั่วไปหมายถึง 'เปิด' ในขณะที่ 0 หมายถึง 'ปิด'

คุณสามารถรวมการตั้งค่าฟีเจอร์หลายอย่างไว้ในประกาศเดียวได้:

            .advanced-text {
  font-family: "MyFont";
  font-variant-settings: "liga" 0, "cswh" 1, "calt" 1;
}

            

              
                Copy
              
            
          

สิ่งนี้จะปิดการใช้งานอักษรควบมาตรฐาน (liga), เปิดใช้งานตัวอักษรตกแต่งตามบริบท (cswh), และเปิดใช้งานอักษรทางเลือกตามบริบท (calt)

ข้อดีของ font-variant-settings:

• การควบคุมโดยตรง: ให้การควบคุมที่แม่นยำเหนือฟีเจอร์ OpenType แต่ละรายการ
• ความยืดหยุ่น: อนุญาตให้เข้าถึงฟีเจอร์ที่ไม่ได้ครอบคลุมโดย font-variant-alternates

ข้อเสียของ font-variant-settings:

• อ่านยากกว่า: การใช้แท็กฟีเจอร์ดิบอาจทำให้โค้ดอ่านและเข้าใจได้ยากขึ้น
• บำรุงรักษายากกว่า: การเปลี่ยนแปลงแท็กฟีเจอร์ภายในฟอนต์จำเป็นต้องอัปเดต CSS โดยตรง

แนวทางปฏิบัติที่ดีที่สุด: ใช้ @font-feature-values และ font-variant-alternates เมื่อใดก็ตามที่เป็นไปได้เพื่อให้อ่านง่ายและบำรุงรักษาได้ดีขึ้น สงวน font-variant-settings ไว้สำหรับกรณีที่จำเป็นต้องเข้าถึงฟีเจอร์โดยตรง

ข้อควรพิจารณาด้านการเข้าถึงได้ (Accessibility)

ในขณะที่ @font-feature-values สามารถเพิ่มความน่าดึงดูดทางสายตาของการพิมพ์ได้อย่างมาก สิ่งสำคัญคือต้องพิจารณาถึงผลกระทบด้านการเข้าถึงได้ การใช้ฟีเจอร์อย่างไม่ถูกต้องอาจส่งผลเสียต่อการอ่านและการใช้งานสำหรับผู้ใช้ที่มีความพิการ นี่คือข้อควรพิจารณาที่สำคัญบางประการ:

• อักษรควบ (Ligatures): แม้อักษรควบจะช่วยเพิ่มความสวยงาม แต่ก็อาจขัดขวางการอ่านสำหรับผู้ใช้ที่มีภาวะ дислексия หรือผู้ที่ต้องพึ่งพาโปรแกรมอ่านหน้าจอ หลีกเลี่ยงการใช้อักษรควบเสริมมากเกินไป โดยเฉพาะในเนื้อหาหลัก ควรมีตัวเลือกให้ปิดการใช้งานอักษรควบหากจำเป็น
• รูปอักขระทางเลือก (Alternate Glyphs): การใช้รูปอักขระที่ตกแต่งมากเกินไปหรือไม่เป็นแบบแผนอาจทำให้ข้อความถอดรหัสได้ยาก ตรวจสอบให้แน่ใจว่ารูปอักขระทางเลือกยังคงมีความคมชัดและความชัดเจนเพียงพอ
• อักษรทางเลือกตามบริบท (Contextual Alternates): แม้ว่าโดยทั่วไปแล้วอักษรทางเลือกตามบริบทจะช่วยปรับปรุงการอ่าน แต่ทางเลือกที่ออกแบบมาไม่ดีอาจสร้างความไม่สอดคล้องทางสายตาและความสับสนได้ ทดสอบอักษรทางเลือกตามบริบทอย่างละเอียดกับชุดตัวอักษรที่แตกต่างกัน
• ความคมชัด (Contrast): ตรวจสอบให้แน่ใจว่ามีความคมชัดเพียงพอระหว่างข้อความและพื้นหลัง โดยไม่คำนึงถึงฟีเจอร์ OpenType ที่ใช้ ใช้เครื่องมือเพื่อตรวจสอบอัตราส่วนความคมชัดและปฏิบัติตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG)
• การทดสอบ: ทดสอบการพิมพ์ของคุณกับเทคโนโลยีสิ่งอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ เพื่อให้แน่ใจว่าข้อความถูกตีความและถ่ายทอดไปยังผู้ใช้ที่มีความพิการอย่างถูกต้อง

การรองรับหลายภาษาและการปรับให้เข้ากับท้องถิ่น (Internationalization and Localization)

ฟีเจอร์ OpenType มีบทบาทสำคัญในการสนับสนุนภาษาและระบบการเขียนที่หลากหลาย ฟอนต์จำนวนมากมีฟีเจอร์ที่ออกแบบมาโดยเฉพาะสำหรับภาษาหรือภูมิภาคที่เฉพาะเจาะจง ตัวอย่างเช่น:

• ภาษาอาหรับ: ฟอนต์ OpenType สำหรับภาษาอาหรับมักจะมีฟีเจอร์สำหรับการปรับรูปตามบริบท ซึ่งจะปรับรูปอักขระตามตำแหน่งภายในคำ
• กลุ่มอักษรอินเดีย (Indic Scripts): ฟอนต์สำหรับกลุ่มอักษรอินเดีย (เช่น เทวนาครี, เบงกาลี, ทมิฬ) ได้รวมกฎการปรับรูปที่ซับซ้อนเพื่อจัดการกับพยัญชนะสังโยคและเครื่องหมายสระอย่างถูกต้อง
• CJK (จีน, ญี่ปุ่น, เกาหลี): ฟอนต์ OpenType สำหรับภาษากลุ่ม CJK มักจะมีฟีเจอร์สำหรับรูปแบบรูปอักขระทางเลือกและการเปลี่ยนแปลงสไตล์ตามความนิยมในแต่ละภูมิภาค

เมื่อออกแบบสำหรับเว็บไซต์หลายภาษา จำเป็นต้องเลือกฟอนต์ที่สนับสนุนภาษาเป้าหมายอย่างเพียงพอ และใช้ฟีเจอร์ OpenType เพื่อให้แน่ใจว่าการแสดงผลถูกต้องและมีการเปลี่ยนแปลงสไตล์ที่เหมาะสม ควรปรึกษากับเจ้าของภาษาและผู้เชี่ยวชาญด้านการพิมพ์เพื่อให้แน่ใจว่าการพิมพ์ของคุณมีความละเอียดอ่อนทางวัฒนธรรมและถูกต้องตามหลักภาษา

นี่คือตัวอย่างบางส่วนที่แสดงให้เห็นถึงความสำคัญของฟีเจอร์ OpenType ในภาษาต่างๆ:

• ภาษาอาหรับ: ฟอนต์ภาษาอาหรับจำนวนมากต้องอาศัยอักษรทางเลือกตามบริบท (calt) อย่างมากเพื่อเชื่อมต่อตัวอักษรอย่างถูกต้องตามตำแหน่งภายในคำ การปิดใช้งานฟีเจอร์นี้อาจส่งผลให้ข้อความขาดตอนและอ่านไม่ออก
• ภาษาฮินดี (เทวนาครี): ฟีเจอร์ rlig (required ligatures) มีความจำเป็นสำหรับการแสดงผลพยัญชนะสังโยคอย่างถูกต้อง หากไม่มีฟีเจอร์นี้ กลุ่มพยัญชนะที่ซับซ้อนจะแสดงเป็นอักขระเดี่ยวๆ ทำให้ข้อความอ่านยาก
• ภาษาญี่ปุ่น: การพิมพ์ภาษาญี่ปุ่นมักใช้รูปอักขระทางเลือกเพื่อสร้างความหลากหลายทางสไตล์และตอบสนองความชอบด้านสุนทรียศาสตร์ที่แตกต่างกัน สามารถใช้ font-variant-alternates หรือ font-variant-settings เพื่อเลือกรูปอักขระทางเลือกเหล่านี้ได้

โปรดจำไว้ว่าต้องศึกษาข้อกำหนดด้านการพิมพ์เฉพาะของแต่ละภาษาที่คุณสนับสนุน และเลือกฟอนต์และฟีเจอร์ให้สอดคล้องกัน การทดสอบกับเจ้าของภาษามีค่าอย่างยิ่งในการรับรองความถูกต้องและความเหมาะสมทางวัฒนธรรมของการพิมพ์

ความเข้ากันได้ของเบราว์เซอร์

การสนับสนุนของเบราว์เซอร์สำหรับ @font-feature-values และคุณสมบัติ CSS ที่เกี่ยวข้องได้ปรับปรุงขึ้นอย่างมากในช่วงเวลาที่ผ่านมา แต่จำเป็นต้องตรวจสอบความเข้ากันได้ก่อนที่จะใช้ฟีเจอร์เหล่านี้ในการใช้งานจริง ณ ปลายปี 2023 เบราว์เซอร์สมัยใหม่ส่วนใหญ่สนับสนุนฟีเจอร์เหล่านี้แล้ว รวมถึง:

• Chrome
• Firefox
• Safari
• Edge
• Opera

อย่างไรก็ตาม เบราว์เซอร์รุ่นเก่าอาจไม่รองรับหรือแสดงพฤติกรรมที่ไม่สอดคล้องกัน ใช้เว็บไซต์เช่น "Can I use..." เพื่อตรวจสอบสถานะความเข้ากันได้ในปัจจุบัน และพิจารณาให้สไตล์สำรองสำหรับเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ feature queries (@supports) เพื่อตรวจจับการสนับสนุนของเบราว์เซอร์และใช้สไตล์ตามความเหมาะสม:

            @supports (font-variant-alternates: discretionary-ligatures) {
  .my-text {
    font-variant-alternates: discretionary-ligatures;
  }
}

            

              
                Copy
              
            
          

สิ่งนี้ช่วยให้แน่ใจว่าคุณสมบัติ font-variant-alternates จะถูกนำไปใช้ก็ต่อเมื่อเบราว์เซอร์สนับสนุนเท่านั้น

ระบบการออกแบบ (Design Systems) และการพิมพ์ที่นำกลับมาใช้ใหม่ได้

@font-feature-values สามารถผสานรวมเข้ากับระบบการออกแบบเพื่อสร้างสไตล์การพิมพ์ที่นำกลับมาใช้ใหม่ได้และมีความสอดคล้องกัน โดยการกำหนดค่าฟีเจอร์ไว้ที่ส่วนกลาง คุณสามารถมั่นใจได้ว่าการตกแต่งทางการพิมพ์จะถูกนำไปใช้อย่างสม่ำเสมอทั่วทั้งเว็บไซต์หรือแอปพลิเคชันของคุณ สิ่งนี้ส่งเสริมความสอดคล้องของแบรนด์และทำให้การบำรุงรักษาง่ายขึ้น

นี่คือตัวอย่างของโครงสร้าง CSS ของคุณภายในระบบการออกแบบ:

            /* typography.css */

@font-feature-values "MyBrandFont" {
  @stylistic-sets {
    brand-headline: ss01;
    brand-body: ss02;
  }
  @discretionary-ligatures {
    brand-ligatures: on;
  }
}

/* components.css */

.headline {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-headline);
}

.body {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-body);
}

.brand-text {
    font-family: "MyBrandFont";
    font-variant-alternates: discretionary-ligatures(brand-ligatures);
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ @font-feature-values ถูกกำหนดในไฟล์ typography.css แยกต่างหาก ในขณะที่สไตล์ของคอมโพเนนต์ถูกกำหนดใน components.css การแยกส่วนความรับผิดชอบนี้ทำให้โค้ดเป็นแบบโมดูลาร์และบำรุงรักษาได้ง่ายขึ้น

โดยการใช้ชื่อที่สื่อความหมายสำหรับค่าฟีเจอร์ของคุณ (เช่น brand-headline, brand-body) คุณทำให้โค้ดของคุณเป็นเอกสารในตัวเองและง่ายสำหรับนักพัฒนาคนอื่นที่จะเข้าใจ ซึ่งมีความสำคัญอย่างยิ่งในทีมขนาดใหญ่ที่นักพัฒนาหลายคนอาจทำงานในโครงการเดียวกัน

การโหลดฟอนต์และประสิทธิภาพ

เมื่อใช้เว็บฟอนต์ สิ่งสำคัญคือต้องปรับปรุงการโหลดฟอนต์เพื่อประสิทธิภาพ ไฟล์ฟอนต์ขนาดใหญ่อาจส่งผลกระทบอย่างมีนัยสำคัญต่อเวลาในการโหลดหน้าเว็บ ซึ่งนำไปสู่ประสบการณ์ผู้ใช้ที่ไม่ดี นี่คือเคล็ดลับบางประการสำหรับการปรับปรุงการโหลดฟอนต์:

• ใช้ WOFF2: WOFF2 เป็นรูปแบบฟอนต์ที่มีประสิทธิภาพสูงสุดและให้การบีบอัดที่ดีที่สุด ควรใช้เมื่อใดก็ตามที่เป็นไปได้
• ทำ Subset ให้ฟอนต์: หากคุณต้องการเพียงชุดตัวอักษรบางส่วนจากฟอนต์ ให้พิจารณาทำ subset ให้ฟอนต์เพื่อลดขนาดไฟล์ เครื่องมือเช่น FontForge และบริการทำ subset ฟอนต์ออนไลน์สามารถช่วยได้
• ใช้ font-display: คุณสมบัติ font-display ควบคุมวิธีการแสดงฟอนต์ในขณะที่กำลังโหลด ใช้ค่าเช่น swap หรือ optional เพื่อหลีกเลี่ยงการบล็อกการแสดงผลของข้อความ
• โหลดฟอนต์ล่วงหน้า (Preload Fonts): ใช้แท็ก <link rel="preload"> เพื่อโหลดฟอนต์ที่สำคัญล่วงหน้า โดยบอกให้เบราว์เซอร์ดาวน์โหลดฟอนต์เหล่านั้นก่อนในกระบวนการโหลดหน้าเว็บ
• พิจารณาใช้บริการฟอนต์: บริการเช่น Google Fonts, Adobe Fonts และ Fontdeck สามารถจัดการโฮสติ้งฟอนต์และการปรับปรุงประสิทธิภาพให้คุณได้

เมื่อทำงานกับ @font-feature-values โปรดจำไว้ว่าผลกระทบด้านประสิทธิภาพของการเปิดใช้งานฟีเจอร์ OpenType โดยทั่วไปนั้นเล็กน้อยมาก ข้อกังวลหลักด้านประสิทธิภาพคือขนาดไฟล์ฟอนต์เอง ควรเน้นที่การปรับปรุงการโหลดฟอนต์และใช้ฟีเจอร์ OpenType อย่างรอบคอบเพื่อยกระดับประสบการณ์ของผู้ใช้

สรุป: สู่ความเป็นเลิศด้านการพิมพ์

กฎ @font-feature-values และคุณสมบัติ CSS ที่เกี่ยวข้องเป็นชุดเครื่องมือที่ทรงพลังสำหรับการปลดล็อกศักยภาพสูงสุดของฟอนต์ OpenType ด้วยความเข้าใจในฟีเจอร์ OpenType ข้อควรพิจารณาด้านการเข้าถึงได้ ข้อกำหนดด้านการรองรับหลายภาษา และความเข้ากันได้ของเบราว์เซอร์ คุณสามารถสร้างการพิมพ์ที่ซับซ้อนและดึงดูดสายตา ซึ่งช่วยยกระดับประสบการณ์ของผู้ใช้และเสริมสร้างเอกลักษณ์ของแบรนด์ของคุณ โอบรับพลังของ @font-feature-values และยกระดับการออกแบบเว็บของคุณสู่ความเป็นเลิศด้านการพิมพ์ในระดับใหม่

โดยการพิจารณาอย่างรอบคอบถึงความแตกต่างเล็กน้อยทางการพิมพ์ของภาษาและวัฒนธรรมต่างๆ คุณสามารถสร้างเว็บไซต์ที่ไม่เพียงแต่ดึงดูดสายตา แต่ยังเข้าถึงได้และครอบคลุมสำหรับผู้ชมทั่วโลก กุญแจสำคัญคือการใส่ใจถึงผลกระทบที่อาจเกิดขึ้นของฟีเจอร์ OpenType ต่อการอ่านและการใช้งาน และทดสอบการพิมพ์ของคุณอย่างละเอียดกับผู้ใช้ที่หลากหลาย